<template>
  <v-app>
    <v-app-bar 
      app 
      :color="isScrolled ? '' : 'primary'" 
      :dark="true"
      :elevation="isScrolled ? 4 : 0"
      :class="{'scrolled-header': isScrolled}"
    >
      <!-- 移动端显示的菜单图标 -->
      <v-app-bar-nav-icon class="d-flex d-md-none" @click="drawer = !drawer"></v-app-bar-nav-icon>
      <!-- 标题 -->
      <h2 class="site-name">{{ $t('message.welcome') }}</h2>
      

      
      <!-- PC端横向菜单 -->
      <div class="d-none d-md-flex justify-center flex-grow-1">
        <v-btn
          v-for="(item, i) in menuItems"
          :key="i"
          :to="item.path"
          text
          class="mx-1"
          :ripple="true"
        >
          <text class="w-color">{{ $t(item.title) }}</text>
        </v-btn>
      </div>
      
      <!-- 移除多余的 v-spacer -->
      <!-- <v-spacer class="d-none d-md-flex"></v-spacer> -->
      
      <!-- 语言切换按钮 -->
      <v-btn icon @click="toggleLanguage">
        <v-icon>{{ currentLanguage === 'en' ? 'mdi-translate' : 'mdi-earth' }}</v-icon>
      </v-btn>
    </v-app-bar>

    <!-- 移动端抽屉式菜单 -->
    <v-navigation-drawer 
      v-model="drawer" 
      app 
      temporary
      transition="slide-x-transition"
    >
      <v-list class="text-center">
        <v-list-item
          v-for="(item, i) in menuItems"
          :key="i"
          :to="item.path"
          link
          @click="drawer = false"
          class="my-1 justify-center"
        >
          <template v-slot:prepend>
            <v-icon>{{ item.icon }}</v-icon>
          </template>
          <v-list-item-title class="text-center">
            <v-slide-x-transition>
              <span>{{ $t(item.title) }}</span>
            </v-slide-x-transition>
          </v-list-item-title>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>

    <v-main>
      <!-- 页面切换动画 -->
      <router-view v-slot="{ Component }">
        <v-fade-transition mode="out-in">
          <component :is="Component" />
        </v-fade-transition>
      </router-view>
    </v-main>

    <!-- 替换 v-footer 为自定义 AppFooter 组件 -->
    <AppFooter />
  </v-app>
</template>

<script>
import AppFooter from './components/AppFooter.vue'

export default {
  components: {
    AppFooter
  },
  data() {
    return {
      drawer: false,
      currentLanguage: 'en',
      isScrolled: false,
      scrollThreshold: 50,
      menuItems: [
        { title: 'message.home', path: '/', icon: 'mdi-home' },
        { title: 'message.about', path: '/about', icon: 'mdi-information' },
        { title: 'message.products', path: '/products', icon: 'mdi-package-variant-closed' },
        { title: 'message.contact', path: '/contact', icon: 'mdi-email' },
      ],
    }
  },
  mounted() {
    // 从localStorage读取语言设置
    const savedLanguage = localStorage.getItem('language')
    if (savedLanguage) {
      this.currentLanguage = savedLanguage
      this.$i18n.locale = savedLanguage
    }
    
    window.addEventListener('resize', this.onResize)
    window.addEventListener('scroll', this.onScroll)
    this.onResize()
    this.onScroll()
  },
  beforeUnmount() {
    window.removeEventListener('resize', this.onResize)
    window.removeEventListener('scroll', this.onScroll)
  },
  methods: {
    toggleLanguage() {
      this.currentLanguage = this.currentLanguage === 'en' ? 'zh' : 'en'
      this.$i18n.locale = this.currentLanguage
      // 保存语言设置到localStorage
      localStorage.setItem('language', this.currentLanguage)
    },
    onResize() {
      if (window.innerWidth >= 960 && this.drawer) {
        this.drawer = false
      }
    },
    onScroll() {
      // 检查滚动位置，更新isScrolled状态
      this.isScrolled = window.scrollY > this.scrollThreshold
    },
  },
}
</script>

<style>
.site-name{
  margin: 0 20px;
  color: #fff;
}
/* 菜单项悬停效果 */
.v-btn--text:hover {
  transform: translateY(-2px);
  transition: transform 0.2s ease-in-out;
}

/* 移动端菜单项动画 */
.v-list-item {
  transition: background-color 0.3s ease;
}

.v-list-item:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* 滚动后的顶部菜单样式 */
.scrolled-header {
  background-color: rgba(0, 0, 0, 0.3) !important;
  backdrop-filter: blur(10px);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* 确保文字在滚动后为白色 */
.scrolled-header .v-btn--text,
.scrolled-header .v-toolbar__title {
  color: white !important;
}
.w-color {
  color: white!important;
}
/* 平滑过渡效果 */
.v-app-bar {
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
</style>
